<template>
    <div>
        <div>姓名:{{ star.name }}</div>
        <div>作品:
            <ul>
                <li v-for="(song,index) in star.songs" :key="index">{{ song }}</li>
            </ul>
        </div>
        <div>
            <button @click="star.songs.push('爱如潮水')">发布新歌曲</button>
        </div>
        <div>{{ star.name }}是一个{{starLevel}}</div>
        <div>{{ star.name }}是一个{{starLevel}}</div>
    </div>
</template>
<script lang='ts' setup>
    interface StarType{
        name:string,
        songs:Array<string>
    }
    import {reactive,computed} from 'vue'
    //************响应式数据************ */
    const star=reactive<StarType>({
        name:'张学友',
        songs:[
            '雪狼湖',
            '吻别',
            '真心的朋友',
            '眼泪'
        ]
    })
    //************计算属性************ */
    const starLevel=computed(()=>{
        console.log('-----starLevel-----');
        return star.songs.length>=3?'大歌星':'普通歌星'}
    )
    // let getStarLevel=()=>{
    //     console.log('-----getStarLevel-----');
    //     return star.songs.length>=3?'大歌星':'普通歌星'
    // }

</script>
<style lang='scss' scoped>
</style>